import React, { useEffect, useState } from "react";
import { Search } from "react-vant";
import { Swiper, Image } from "react-vant";
import { useNavigate } from "react-router-dom";
import "../Shop/index.css";
import axios from "axios";
const Index: React.FC = () => {
  const [value, setValue] = useState("");
  //跳转
  const navigate = useNavigate();
  const dian = () => {
    navigate("/cart");
  };

  const navigate1 = useNavigate();
  const gao = () => {
    navigate1("/xq");
  };

  const navigate2 = useNavigate();
  const fodetail = () => {
    navigate2("/dan");
  };
  const [yzdp, setYzdp] = useState([]);
  const render = () => {
    axios.get("/api/yzdp").then((resp) => {
      console.log(resp.data.yzdp);
      setYzdp(resp.data.yzdp);
    });
  };
  useEffect(() => {
    render();
  }, []);

  const TIOAQWE = () => {
     navigate('/dian')
  }
  return (
    <div>
      <div className="box1">
        <Search
          value={value}
          onChange={setValue}
          clearable
          placeholder="请输入搜索关键词"
          className="seaar"
        />
        ;
        <img
          src="../src/assets/1.jpg"
          alt=""
          className="Image"
          onClick={fodetail}
        />
        {/* <p>订单</p> */}
      </div>
      <div className="box2">
        <Swiper>
          <Swiper.Item>
            <div>
              <div>
                <img src="../../../../src/assets/yybj.png" />
              </div>
              <div>营养保健</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/nxjk.png" />
              </div>
              <div>男性健康</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/pfyy-1.png" />
              </div>
              <div>皮肤用药</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/yljx.png" />
              </div>
              <div>医疗机械</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/jfss.png" />
              </div>
              <div>减肥瘦身</div>
            </div>

            <div>
              <div>
                <img src="../../../../src/assets/vxjk.png" />
              </div>
              <div>女性健康</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/cwyy.png" />
              </div>
              <div>肠胃用药</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/yjym.png" />
              </div>
              <div>体检疫苗</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/jtcb.png" />
              </div>
              <div>家庭常备</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/fsgk.png" />
              </div>
              <div>风湿骨科</div>
            </div>
          </Swiper.Item>
          <Swiper.Item>
            <div>
              <div>
                <img src="../../../../src/assets/vxjk.png" />
              </div>
              <div>女性健康</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/cwyy.png" />
              </div>
              <div>肠胃用药</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/yjym.png" />
              </div>
              <div>体检疫苗</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/jtcb.png" />
              </div>
              <div>家庭常备</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/fsgk.png" />
              </div>
              <div>风湿骨科</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/yybj.png" />
              </div>
              <div>营养保健</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/nxjk.png" />
              </div>
              <div>男性健康</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/pfyy-1.png" />
              </div>
              <div>皮肤用药</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/yljx.png" />
              </div>
              <div>医疗机械</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/jfss.png" />
              </div>
              <div>减肥瘦身</div>
            </div>
          </Swiper.Item>
        </Swiper>
      </div>

      <div className="box3">
        <h3>特惠好物</h3>
        <div className="tu">
          <div style={{ width: "50%" }}>
            <img
              src="../src/assets/608.jpg"
              alt=""
              className="image"
              onClick={gao}
              width={"95%"}
            />
            <p>
              避孕药一般指女性用避孕药
              <br />
              <span>￥328</span>
            </p>
          </div>
          <div>
            <img src="../src/assets/15.jpg" alt="" className="image" />
            <p>
              埃森美婴幼儿儿童领敏益生菌低剂....
              <br />
              <span>￥328</span>
            </p>
          </div>
          <div>
            <img src="../src/assets/16.jpg" alt="" className="image" />
            <p>
              CQRZEN黑发博士黑灵芝精华液....
              <br />
              <span>￥89</span>
            </p>
          </div>
        </div>
      </div>

      {yzdp.length > 0 &&
        yzdp.map((item, index) => (
          <div className="box4">
            <div className="box4title">{item.title}</div>
            <div className="box4top">
              <div>
                <img src="../../../../src/assets/17.jpg" />
                <div>
                  <div>微脉心选</div>
                  <div>{item.city}</div>
                </div>
              </div>
              <div className="jindian" onClick={TIOAQWE}>进店&gt;</div>
            </div>
            <div className="box4zhong">
              {item.sp.map((it, ind) => (
                <div>
                  <div>
                    <img src={it.img} />
                  </div>
                  <div>{it.title}</div>
                  <div>{it.price}</div>
                </div>
              ))}
            </div>
          </div>
        ))}
    </div>
  );
};

export default Index;
